<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .demo {
            width: 500px;
            height: auto;
            border: 1px solid #000;
            margin: 50px auto;

        }

        .demo textarea {
            width: 300px;
            height: 100px;
            resize: none;

        }

        .demo ul {
            height: auto;
            width: 300px;
            margin-left: 80px;
        }

        .demo li {
            height: 20px;
            border-bottom: 1px solid red;
        }
    </style>
    <script>
        window.onload = function () {
            var ul = document.createElement("ul");
            var btn = document.getElementsByTagName("button")[0];
            var text = document.getElementsByTagName("textarea")[0];
            btn.parentNode.appendChild(ul);
            btn.onclick = function () {
                if (text.value == "") {
                    alert("输入内容不能为空");
                    return;
                }
                var li = document.createElement("li");
                li.innerHTML = text.value;
                var lis = document.getElementsByTagName("li");
                if (lis.length==0){
                    ul.appendChild(li);
                }else {
                    ul.insertBefore(li,lis[0]);
                }
                text.value = "";
            }
        }
    </script>
</head>
<body>
<div class="demo">
    微博发布：<textarea name="" id="" cols="30" rows="10"></textarea>
    <button>发布</button>
</div>
</body>
</html>